import Taro from '@tarojs/taro'
import React, { useCallback } from 'react';
import {
  View, Text, Image, Button
} from '@tarojs/components'
import i18n from '@I18N'
import LoginVerifyBtn from '@COMPONENTS/Button/LoginVerifyBtn'
import Images from '@ASSET/Images'
import withWebLogin from '@HOC/withWebLogin'
import { NAV_TYPE_ENUM } from '@CONSTANTS/profile'
import RedDot from '@COMPONENTS/RedDot'
import Navigate from '@NAVIGATION/navigateManager'
import contactDialog from '@UTILS/contactDialog';
import { getPlatform } from '@UTILS/common'
import { RouterConfigITF } from '@INTERFACES/Profile'
import { Analytic_Type } from '@CONSTANTS/analytic'
import { requestSubscribeAndSave } from '@UTILS/subscribeMessage';
import { SUBSCRIBES_EVENT } from '@CONSTANTS/common';
import { RouteSceneKey } from '@NAVIGATION/scenes';
import style from './NavCardItem.module.scss'

const { isWeb } = getPlatform()

interface NavContentProps {
  name: string,
  source: string,
  num?: number,
  showRightText?: boolean
}

interface NavCardItemProps {
  isLogin: boolean,
  data: RouterConfigITF,
  showLogin: () => void,
  showRightText?: boolean
}
const NavContent: React.FC<NavContentProps> = ({ name, source, num = 0, showRightText }) => (
  <View className={style.navCardItem} hover-class="tab-active">
    <Image className={style.navImage} src={source} />
    <View className={style.leftContainer}>
      <Text className={style.navText}>{name}</Text>
      {num > 0 && <RedDot num={num} />}
      {showRightText && <Text className={style.navRightText}>{i18n.message.view_detail()}</Text>}
      <Image className={style.navArrow} src={Images.arrow.form} />
    </View>
  </View>
)

const NavCardItem: React.FC<NavCardItemProps> = ({ data, isLogin, showLogin, showRightText }) => {
  const {
    name, route, type, source, eventId, num, routeParams = {}, disabledVerify, isAuthRedirect
  } = data

  const onNavigateTo = useCallback(
    () => {
      if (!route) {
        Taro.showToast({
          title: '暂未开通'
        })
        return
      }
      if (route === RouteSceneKey.messageList) {
        requestSubscribeAndSave(SUBSCRIBES_EVENT.DOCTOR_FOLLOWUP_REPLY, {})
      }
      Navigate[route]?.(routeParams)
      Taro.tracker.trackEvent(eventId)
    },
    [route, eventId, routeParams]
  )
  const onClick = useCallback(() => {
    Taro.tracker.trackEvent(Analytic_Type.tap_customer_service.eventId, { Page: '我的' })
    if (!isWeb) return
    contactDialog()
  }, [])
  if (type === NAV_TYPE_ENUM.Button && (isWeb || isLogin)) {
    return (
      <Button className={style.navCardItemView} hover-class="none" openType="contact" onClick={onClick}>
        <NavContent name={name} source={source} showRightText={showRightText} />
      </Button>
    )
  }

  return (
    <LoginVerifyBtn
      onClick={onNavigateTo}
      showLogin={showLogin}
      eventId={eventId}
      disabledVerify={disabledVerify}
      className={style.navCardItemView}
      loginSuccess={isAuthRedirect ? onNavigateTo : undefined}
    >
      <NavContent name={name} source={source} num={num} showRightText={showRightText} />
    </LoginVerifyBtn>
  )
}

export default withWebLogin(NavCardItem)
